<template>
	<div class="home">
		<h1>$store.state.count</h1>
		{{$store.state.count}}**
		<h1>count</h1>
		{{count}}
		<h1>$store.commit</h1>
		<button @click="$store.commit('add',3)">加</button>
		<button @click="$store.commit('reduce')">减</button>
		<br>
		<!--    mapMutations-->
		<h1>mapMutations</h1>
		<button @click="add(2)">加</button>
		<button @click="reduce">减</button>
		<br>
		<!--    mapMutations-->
		<h1>mapActions</h1>
		<button @click="add2(2)">加</button>
		<button @click="reduce2">减</button>
	</div>
</template>

<script>
	import { mapActions, mapMutations, mapState } from 'vuex'

	export default {
		name: 'home',
		data () {
			return {
				msg: 'hello'
			}
		},
		// computed: mapState({
		//   count: state => state.count
		// })
		computed: {
			...mapState(['count']),
			/*	...mapGetters(['count'])*/
		},
		methods: { ...mapMutations(['add', 'reduce']), ...mapActions(['add2', 'reduce2']) }
	}
</script>
